<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import EchartsMixins from '../echarts.mixins'
import Format from '@/utils/format'

export default {
  mixins: [EchartsMixins],
  data() {
    return {
      yAxisList: [],
      charts: '',
      xAngleList: [],
      compensateXAngleList: [],
      // 监测点名称
      monitorName: '',
      seriesLists: [],
    }
  },
  computed: {
    options() {
      const that = this
      const Echarts = require('echarts')
      return {
        title: {
          text: this.monitorName + '倾角变化曲线图',
          x: 'center',
          align: 'center',
        },
        grid: {
          left: '7%',
          right: '8%',
          bottom: '70px'
        },
        legend: {
          data: ['相对倾角', '未补偿倾角', '温度', '方位角'],
          y: 'top',
          x: 'center',
          padding: [30, 0 , 0, 0],
          // 设置为可滚动的图例
          type: 'scroll',
          selected:{
            "方位角":false, //默认不展示项
            "未补偿倾角":false, //默认不展示项
          }
        },
        toolbox: {
          right: '5',
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',

            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: (params, ticket, callback) => {
            var contentArr = []
            contentArr.push(Format(new Date(params[0].value[0])))
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              if (data.seriesName == '温度') {
                contentArr.push(data.marker + data.seriesName + '值：' + data.value[1] + '°C')
              } else {
                contentArr.push(data.marker + data.seriesName + '值：' + data.value[1] + '°')
              }
            }
            let remark = params[0]?.data?.remark || ''
            remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
            return contentArr.join('<br/>')
          },
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          },
          {
            // Y轴的滚动条
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            top:'10%',
            left: '0%', // 根据实际情况调整位置
            start: 0,
            end: 100 // 根据实际情况调整显示范围
          },
          {
            // X轴的滚动条
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            bottom: '0%', // 根据实际情况调整位置
            start: 0,
            end: 100 // 根据实际情况调整显示范围
          },
          {
            // 内置的Y轴缩放，可以用鼠标滚轮操作
            type: 'inside',
            yAxisIndex: [0],
          },
          {
            // 内置的X轴缩放，可以用鼠标滚轮操作
            type: 'inside',
            xAxisIndex: [0],
          }
        ],
        xAxis: {
          splitLine: {
            show: false
          },
          type: 'time',
          symbol: 'none',
          boundaryGap: false,
          axisLabel: { // 坐标轴标签样式设置
            showMaxLabel: true,
            formatter: function (value, index) { // 坐标轴文字展示样式处理
              return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
            },
          }
        },
        yAxis: this.yAxisList,
        series: this.seriesLists
      }
    }
  },
  methods: {
    updateEchart(data, monitorName, isJiuGan, monitorInfo) {
      this.charts.clear()
      this.monitorName = monitorName
      this.collectionTime = monitorInfo.collectionTime
      this.compensateXAngleList = data.compensateInAngle
      this.xAngleList = data.inAngle
      this.tempList = data.temp
      this.azRealAngleList = data.azRealAngle
      if (isJiuGan) {
        this.seriesLists = [{
          yAxisIndex: 0,
          name: '未补偿倾角',
          type: 'line',
          smooth: false,
          symbol: 'none',
          data: this.xAngleList,
        }, {
          yAxisIndex: 1,
          name: '温度',
          type: 'line',
          smooth: false,
          symbol: 'none',
          data: this.tempList,
        }, {
          yAxisIndex: 2,
          name: '方位角',
          type: 'line',
          smooth: false,
          symbol: 'none',
          data: this.azRealAngleList,
        },{
          yAxisIndex: 0,
          name: '相对倾角',
          type: 'line',
          smooth: false,
          splitNumber: 0.05,
          symbol: 'none',
          data: this.compensateXAngleList,
          markPoint: {
            symbolSize: 50,
            data: [
              {type: 'max', name: 'Max'},
              {type: 'min', name: 'Min'}
            ],
            label: {
              position: "inside",
              distance: 7,
              formatter: function (data) {
                return data.value + '°'
              }
            },
            itemStyle: {
              color: '#1c85ff'
            }
          },
          markLine: {
            data: this.markLine,
          }
        },]
        this.yAxisList = [
          {
            max: function (value) {
              if (value.max < 0.3) {
                return 0.3;
              }
              return Math.ceil(value.max);//向上取整
            },
            name: '角度值(°)',
            type: 'value'
          }, {
            name: '温度(°C)',
            type: 'value',
          }, {
            offset: 50,
            name: '方位角(°)',
            type: 'value',
          },
        ]
      } else {
        this.yAxisList = [
          {
            max: function (value) {
              if (value.max < 1) {
                return 1;
              }
              return Math.ceil(value.max);//向上取整
            },
            min: function (value) {
              if (value.min > -1) {
                return -1;
              }
              return -Math.ceil(Math.abs(value.min));//向上取整
            },
            name: '角度值(°)',
            type: 'value'
          },
          {
            offset: 50,
            name: '方位角(°)',
            type: 'value',
          },
        ]
        this.seriesLists = [
          {
            yAxisIndex: 0,
            name: '相对倾角',
            type: 'line',
            splitNumber: 0.05,
            smooth: false,
            symbol: 'none',
            data: this.compensateXAngleList,
            markPoint: {
              symbolSize: 50,
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ],
              label: {
                position: "inside",
                distance: 7,
                formatter: function (data) {
                  return data.value + '°'
                }
              },
              itemStyle: {
                color: '#1c85ff'
              }
            },
            markLine: {
              data: this.markLine,
            }
          },
          {
            yAxisIndex: 1,
            name: '方位角',
            type: 'line',
            smooth: false,
            symbol: 'none',
            data: this.azRealAngleList,
          },
        ]
      }
      this.initEcharts()
      this.charts.setOption(this.options)
      this.charts.resize()
    },
  },
}
</script>
